/**
 * 大屏模式组件 - 全屏展示核心数据
 */
import React from 'react';
import { X } from 'lucide-react';

interface FullscreenModeProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

const FullscreenMode: React.FC<FullscreenModeProps> = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[9999] bg-gradient-to-br from-slate-900 via-blue-800 to-indigo-900 text-white overflow-hidden">
      {/* 背景装饰 */}
      <div className="absolute inset-0 opacity-20">
        <div className="absolute top-0 left-0 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-indigo-500 rounded-full blur-3xl"></div>
      </div>
      
      {/* 退出按钮 */}
      <button
        onClick={onClose}
        className="absolute top-4 right-4 z-50 p-3 bg-white/10 backdrop-blur-sm rounded-lg hover:bg-white/20 transition-all duration-200 border border-white/20"
        aria-label="退出大屏模式"
      >
        <X size={24} />
      </button>

      {/* 大屏内容 */}
      <div className="relative z-10 h-full w-full overflow-auto">
        {children}
      </div>
    </div>
  );
};

export default FullscreenMode;

